<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>单人详情</title>
    <link href="../assets/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 基础区域 */
        #basePage {
            position: relative;
            width: 60%;
            left: 20%;
            top: 5px;
        }

        /* 医生区域 */
        #rolePa {
            position: relative;
        }

        @media (min-width: 768px) {
            #rolePa {
                left: 15%;
            }
        }

        /*翻转*/
        .mixJ {
            position: absolute;
            backface-visibility: hidden;
            transition: all 1s;
        }

        #opTwo_2 {
            transform: rotateY(-108deg);
        }

        body {
            background-image: url("../picture/background.jpg");
        }
    </style>
</head>

<body>
<!--修改密码弹出框-->
<div class="modal fade" id="putModal" tabindex="-1" aria-labelledby="putModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="putModalLabel">修改密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close"></button>
            </div>
            <div class="modal-body">
                <form class="container" style="width: 80%;" onsubmit="return false">
                    <div class="d-flex">
                        <div class="form-floating" style="width: 60%;">
                            <input type="text" class="form-control" id="finCode" placeholder="fin"
                                   autocomplete="off">
                            <label for="finCode">验证码</label>
                        </div>
                        <input class="btn btn-primary" type="button" style="width: 40%;" value="发送验证码"
                               onclick="finCodeS(this)"/>
                    </div>
                    <div class="form-floating">
                        <input type="password" class="form-control" id="finPwd" placeholder="fin"
                               autocomplete="off">
                        <label for="finPwd">设置新密码</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="toFind()">确认提交
                </button>
            </div>
        </div>
    </div>
</div>
<!--医生信息展示-->
<div class="bg-light" id="basePage">
    <a href="javascript:history.back()" id="reA">←返回</a>
    <div class="container" id="rolePa">
        <fieldset id="fieldset" disabled>
            <form class="d-grid gap-3" id="addRoleForm">
                <input type="hidden" id="doctorPhoto">
                <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="myFile">医生头像</label>
                    <div class="col-md-8">
                        <label for="myFile">
                            <img src="../picture/none.png" class="rounded-circle img-fluid p-3" alt=""
                                 id="rolePhoto"/>
                        </label>
                        <input type="file" id="myFile" hidden="hidden" onchange="imgChange(this)"/>
                        <label for="myFile" id="myFileText"
                               style="color: red;display: none">上传文件大小应小于3MB</label>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-1" for="doctorCode">工号</label>
                    <div class="col-md-3">
                        <input class="form-control" id="doctorCode" type="text" autocomplete="off"
                               placeholder="工号" disabled>
                    </div>
                    <label class="col-md-1" for="departmentName">科室</label>
                    <div class="col-md-3">
                        <input class="form-control" id="departmentName" type="text" disabled>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-1 col-form-label" for="doctorJob">职位</label>
                    <div class="col-md-3">
                        <input class="form-control" id="doctorJob" type="text" disabled>
                    </div>
                    <label class="col-md-1 col-form-label" for="doctorName">姓名</label>
                    <div class="col-md-3">
                        <input class="form-control" id="doctorName" type="text" disabled>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-1 col-form-label" for="doctorGender">性别</label>
                    <div class="col-md-3">
                        <select class="form-select" id="doctorGender">
                            <option value="true">男</option>
                            <option value="false">女</option>
                        </select>
                    </div>
                    <label class="col-md-1 col-form-label" for="doctorAge">生日</label>
                    <div class="col-md-3">
                        <input class="form-control" id="doctorAge" type="date">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 col-form-label" for="doctorTel">联系方式</label>
                    <div class="col-md-6">
                        <input class="form-control" id="doctorTel" type="text" disabled>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 col-form-label" for="doctorInfo">简介</label>
                    <div class="col-md-6">
                        <input class="form-control" id="doctorInfo" autocomplete="off" type="text"
                               placeholder="简介">
                    </div>
                </div>
            </form>
        </fieldset>
        <br>
        <div class="form-group row">
            <label class="col-md-3 col-form-label">操作</label>
            <div class="col-sm-5">
                <div class="mixJ" id="opTwo_1">
                    <input class="btn-check" name="op" id="op_1" type="radio" data-bs-toggle="modal"
                           data-bs-target="#putModal">
                    <label class="btn btn-secondary" for="op_1">修改密码</label>
                    <input class="btn-check" name="op" id="op_2" type="radio">
                    <label class="btn btn-primary" for="op_2">修改资料</label>
                </div>
                <div class="mixJ" id="opTwo_2">
                    <input class="btn-check" name="op" id="op_3" type="radio">
                    <label class="btn btn-primary" for="op_3">提交修改</label>
                    <input class="btn-check" name="op" id="op_4" type="radio">
                    <label class="btn btn-secondary" for="op_4">放弃修改</label>
                </div>
            </div>
        </div>
        <br>
    </div>
</div>
</body>
<script src="../assets/bootstrap.bundle.min.js"></script>
<script src="../assets/axios.js"></script>
<script src="../js/z-alert.js"></script>
<script src="../js/request.js"></script>
<script>
    window.onload = () => {
        getUser();
    }// 获取当前医生信息
    function getUser() {
        axios("doctorLog").then(resp => {
            setForm(resp.data)
        })
    }//单个医生：json转表单
    function setForm(h) {
        document.getElementById("rolePhoto").setAttribute("src", `${BACK_URL}common/download?name=${h["doctorPhoto"]}`)
        const group = ["doctorCode", "doctorName", "doctorTel", "doctorJob",
            "doctorPhoto", "doctorAge", "doctorInfo", "doctorGender", "departmentName"];
        for (let i = 0; i < group.length; i++) {
            document.getElementById(group[i]).value = h[group[i]]
        }
    }//单个医生：表单转json
    document.getElementById("op_3").onclick = () => {
        const json = {
            "doctorPhoto": '', "doctorAge": '', "doctorInfo": '', "doctorGender": ''
        };
        for (const key in json) {
            json[key] = document.getElementById(key).value;
        }
        axios.put("doctorLog", json).then(resp => {
            const data = resp.data;
            (data["code"] === 0) ? showAlert(data["msg"]) : showAlert(data["msg"], "alert-success");
            setTimeout(() => {
                document.getElementById('op_4').click();
                getUser();
            }, 1000);
        })
    }// 上传后改变图片
    function imgChange(file) {
        const myFileText = document.getElementById("myFileText").style,
            myFile = file.files[0]
        if (myFile.size > 3145700) {
            myFileText.display = "";
        } else {
            myFileText.display = "none";
            const formData = new FormData();
            formData.append("myFile", myFile)
            axios.post("common/upload", formData).then(resp => {
                const imgName = resp.data
                document.getElementById("rolePhoto").setAttribute("src", `${BACK_URL}common/download?name=${imgName}`);
                document.getElementById("doctorPhoto").value = imgName;
            })
        }
    }

    (function () {// 表单允许与禁止访问
        const opTwo_1 = document.getElementById("opTwo_1")
        const opTwo_2 = document.getElementById("opTwo_2")
        document.getElementById("op_2").onclick = () => {
            document.getElementById("fieldset").removeAttribute("disabled");
            opTwo_1.style.transform = "rotateY(180deg)"
            opTwo_2.style.transform = "rotateY(0deg)";
        }
        document.getElementById("op_4").onclick = () => {
            document.getElementById("fieldset").setAttribute("disabled", "disabled");
            getUser();
            opTwo_2.style.transform = "rotateY(180deg)"
            opTwo_1.style.transform = "rotateY(0deg)";
        }
    }());

    //根据json键值进行赋值
    function jVal(json) {
        for (const key in json) {
            json[key] = document.getElementById(json[key]).value;
        }
        return json;
    }//找回密码发送验证码
    function finCodeS(val) {
        setTime(val)
        axios.get("doctorLog/resetPwd").then(resp => {
            if (resp.data["code"] === 1) showAlert(resp.data["msg"], "alert-success")
            else showAlert(resp.data["msg"])
        })
    }//进行找回密码
    function toFind() {
        const json = jVal({
            "checkCode": "finCode", "password": "finPwd"
        });
        axios.put("doctorLog/resetPwd", json).then(resp => finRes(resp.data))
    }//重置密码结果
    function finRes(data) {
        (data["code"] === 0) ? showAlert(data["msg"]) : showAlert(data["msg"], "alert-success");
        setTimeout(() => {
            document.getElementById('close').click();
        }, 1000);
    }
</script>

</html>